<template>
	<view class="popup-overlay" v-if="showPopup">
		<view class="popup">
			<view class="popup-header">
				<text class="title">添加设备</text>
				<text class="close-btn" @click.stop="closePopup">×</text>
			</view>
			<view class="popup-content">
				<input class="popup-input" type="text" v-model="device.id" placeholder="请输入设备ID" />
				<picker mode="selector" :range="deviceNumbers" @change="onNumberChange">
					<view class="picker-custom">

						<view class="picker-selected">{{ selectedNumber || '选择编号' }}</view>
						<view class="picker-arrow"></view>
					</view>
				</picker>
			</view>
			<button class="confirm-button" @click="confirmAddDevice">确认添加</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showPopup: Boolean
		},
		data() {
			return {
				device: {
					id: ''
				},
				deviceNumbers: ['01号', '02号', '03号'], // 示例编号列表
				selectedNumber: '' // 用户选择的编号
			};
		},
		methods: {
			openPopup() {
				this.showPopup = true;
			},
			closePopup() {
				this.showPopup = false;
			},
			onNumberChange(e) {
				this.selectedNumber = this.deviceNumbers[e.detail.value];
			},
			confirmAddDevice() {
				console.log('添加设备:', this.device);
				this.closePopup();
			}
		}
	};
</script>

<style scoped>
	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup {
		background-color: #fff;
		width: 80%;
		border-radius: 10px;
		padding: 20px;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
	}

	.close-btn {
		font-size: 24px;
		color: #999;
		cursor: pointer;
	}

	.popup-content {
		display: flex;
		flex-direction: column;
	}

	.popup-input {
		margin-top:20px;
		margin-bottom: 20px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		background-color: #F5F5F5;
	}

	.picker-custom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		border: 1px solid #ccc;
		/* 边框 */
		border-radius: 5px;
		/* 圆角 */
		background-color: #F5F5F5;
		/* 背景颜色 */
	}

	.picker-selected {
		flex: 1;
		color: #333;
		/* 文字色 */
	}

	.picker-arrow {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #000;
		margin-left: 10px;
	}

	.confirm-button {
		margin-top: 40rpx;
		width: 100%;
		/* padding: 10px; */
		background-color: #65C61D;
		color: #fff;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		cursor: pointer;
	}

	.confirm-button:hover {
		background-color: #45a049;
	}
</style>